<!DOCTYPE HTML>
<html>
<head>
    {include file="layout:_meta" /}
    <title>管理员列表</title>
</head>
<body>
<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i>
    首页 <span class="c-gray en">&gt;</span>
    权限管理 <span class="c-gray en">&gt;</span>
    管理员列表
    <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>
<div id="table" class="page-container">
    <div class="text-c">
        <input type="text" class="input-text" v-model="search.username" style="width:250px" placeholder="输入管理员名称">
        <button type="submit" v-on:click="btnSearch()"  class="btn btn-success" name=""><i class="Hui-iconfont">&#xe665;</i> 搜用户</button>
    </div>
    <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius">
                <i class="Hui-iconfont">&#xe6e2;</i>
                批量删除
            </a>
            <a href="javascript:;" v-on:click="adminAdd()" class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</i>
                添加管理员
            </a>
        </span>
        <span class="r">共有数据：<strong>{{count}}</strong> 条</span></div>
    <table class="table table-border table-bordered table-bg">
        <thead>
        <tr>
            <th scope="col" colspan="9">员工列表</th>
        </tr>
        <tr class="text-c">
            <th width="25"><input type="checkbox" name="" value=""></th>
            <th width="40">ID</th>
            <th width="150">登录名</th>
            <th width="130">加入时间</th>
            <th width="100">是否已启用</th>
            <th width="100">操作</th>
        </tr>
        </thead>
        <tbody>
        <tr class="text-c" v-for="(item,index)  in lists">
            <td><input type="checkbox" value="1" name=""></td>
            <td>{{item.id}}</td>
            <td>{{item.username}}</td>
            <td>{{item.create_time|timeFormat}}</td>
            <td class="td-status">
                <span v-if="item.status==1" class="label label-success radius">已启用</span>
                <span v-else class="label radius">已停用</span></td>
            </td>
            <td class="td-manage">
                <a style="text-decoration:none" v-bind:data-id="item.id" v-on:click="adminStop($event,item,index)" href="javascript:;" title="停用">
                    <i class="Hui-iconfont">&#xe631;</i>
                </a>
                <a title="编辑" href="javascript:;" v-bind:data-id="item.id" v-on:click="adminEdit($event)" class="ml-5" style="text-decoration:none"><i
                    class="Hui-iconfont">&#xe6df;</i>
                </a>
                <a title="删除" href="javascript:;" v-bind:data-id="item.id" v-on:click="btnDel($event,index)" class="ml-5" style="text-decoration:none">
                    <i class="Hui-iconfont">&#xe6e2;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    <!--vueJS分页---start-->
    <div class="pagination">
        <ul>
            <li v-if="current>1"><a v-on:click="current--,pageClick()">上一页</a></li>
            <li v-if="current==1"><a class="banclick">上一页</a></li>
            <li v-for="index in indexs"  v-bind:class="{ 'active': current == index}">
                <a v-on:click="btnClick(index)">{{ index }}</a>
            </li>
            <li v-if="current!=total"><a v-on:click="current++,pageClick()">下一页</a></li>
            <li v-if="current == total"><a class="banclick">下一页</a></li>
            <li><a>共<i>{{total}}</i>页</a></li>
        </ul>
    </div>
    <!--vueJS分页---end-->
</div>
<!--_footer 作为公共模版分离出去-->
{include file="layout:_footer" /}
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->

<!--<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>-->
<script type="text/javascript">
    var models = {
        count:0,
        lists: [],//表格数据
        total:1, //总页数
        current:1,  //当前页码
        search:{}   //搜索框
    };

    var app_model = new Vue({
        el: "#table",
        data: models,
        mounted: function () {
        },
        methods: {
            //上一页,下一页翻页
            pageClick: function(){
                initTable("{:url('admin/index')}",this.current,this.search);
            },

            //点击页码
            btnClick: function(data){
                if(data != this.current){
                    this.current = data;
                    initTable("{:url('admin/index')}",this.current,this.search);
                }
            },

            //搜索框搜索
            btnSearch:function () {
                initTable("{:url('admin/index')}",1,this.search);
            },

            //停用|启用
            adminStop:function (event, item,index) {
                var _this = $(event.currentTarget);
                var id = _this.attr('data-id');
                var msg = item.status==1?'确认停用吗？':'确认启用么？';
                var status = item.status==1?0:1;
                layer.confirm(msg,function(){
                    util.post("{:url('admin/status')}",{id:id,status:status},function (data) {
                        if(data.status==true){
                            item.status = status;
                            layer.msg(data.message,{icon:1,time:1000});
                        }else {
                            layer.msg(data.message,{icon:1,time:1000});
                        }
                    });
                });
            },

            //删除按钮
            btnDel: function (event, index) {
                var _this = $(event.currentTarget);
                var id = _this.attr('data-id');
                admin_del("{:url('admin/remove')}", _this, id, index);
            },

            //添加
            adminAdd:function () {
                var url = "{:url('admin/add')}";
                admin_add('添加管理员',url,'800','500');
            },

            //编辑
            adminEdit: function (event) {
                var _this = $(event.currentTarget);
                var id = _this.attr('data-id');
                var url = "{:url('admin/edit')}" + "?id=" + id;
                admin_edit('编辑权限节点', url, '', '500');
            }
        },

        //分页
        computed: {
            indexs: function () {
                var left = 1;
                var right = this.total;
                var ar = [];
                if (this.total >= 5) {
                    if (this.current > 3 && this.current < this.total - 2) {
                        left = this.current - 2;
                        right =left + 4;
                    } else {
                        if (this.current <= 3) {
                            left = 1;
                            right = 5;
                        } else {
                            right = this.total;
                            left = this.total - 4;
                        }
                    }
                }
                while (left <= right) {
                    ar.push(left);
                    left++;
                }
                return ar
            }
        }

    });

    //初始化数据表格
    initTable("{:url('admin/index')}");
</script>
</body>
</html>